import React from 'react';
import Animate from 'rc-animate';
import { Tag, Flex, Icon, WhiteSpace } from 'antd-mobile';

import './index.sass';

/**
 * column : number 默认3
 * multiple : boolean 默认false
 * value: 值
 */

class Select extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value:
        props.value !== undefined
          ? props.multiple
            ? new Set(props.value)
            : props.value
          : props.multiple
            ? new Set()
            : undefined,
      open: false
    };
  }

  onChange = (item, selected) => {
    // console.log(item, selected)
    let { value } = this.state;
    if (this.props.multiple === true) {
      if (selected) {
        value.add(item.value);
      } else {
        value.delete(item.value);
      }
    } else {
      value = selected ? item.value : undefined;
    }
    if (this.props.onChange) {
      this.props.onChange(this.props.multiple ? Array.from(value) : value);
    }
    this.setState({ value });
  };

  renderItem = index => {
    const { value } = this.state;
    const { data, column, multiple } = this.props;
    const items = [];
    for (let i = 0; i < (column || 3); i++) {
      data[i + index]
        ? items.push(<Flex.Item key={i + index}>
          <Tag
            style={{ width: '100%' }}
            selected={multiple === true ? value.has(data[i + index].value) : value === data[i + index].value}
            onChange={selected => {
              this.onChange(data[i + index], selected);
            }}
          >
            {data[i + index].label}
          </Tag>
        </Flex.Item>)
        : items.push(<Flex.Item key={i + index} />);
    }
    return items;
  };

  renderContent = () => {
    const { data, column, multiple } = this.props;
    const columns = [];
    for (let j = 0; j < (column || 3); j++) {
      columns.push(j);
    }
    const content = [];
    for (let i = 0, len = data.length; i < len;) {
      content.push(<WhiteSpace key={`i-${i}`} size="sm" />);
      content.push(<Flex style={{ width: '100%' }} key={i}>
        {this.renderItem(i)}
      </Flex>);
      // content.push(<WhiteSpace key={`i-${i}`} size='sm' />)
      i += column || 3;
    }
    return content;
  };

  render() {
    const content = this.renderContent();
    return (
      <div className="crm-filter-select-container">
        <div onClick={() => this.setState({ open: !this.state.open })} className="crm-filter-select-title">
          {this.props.title}
          <span
            style={{
              color: '#999',
              float: 'right',
              display: 'flex',
              alignItems: 'center'
            }}
          >
            {this.props.multiple && '（多选）'}
            <Icon size="sm" type={this.state.open ? 'up' : 'down'} />
          </span>
        </div>
        {this.state.open ? (
          <div key="an-fade" className="crm-filter-select-values">
            {content}
          </div>
        ) : null}
      </div>
    );
  }
}

export default Select;
